<template>
  <div
    :class="['art-gallery', 'clearfix', $ua.isFromPc() ? 'z-web' : 'z-phone']"
  >
    <div class="left">
      <div class="title">
        <div class="chinese">数字展馆</div>
      </div>
      <div class="menu">
        <ul class="top">
          <li
            :class="['content', active == index ? 'new-content' : '']"
            @click="handleMenu(index)"
            v-for="(item, index) in menuTop"
            :key="item"
          >
            {{ item }}
          </li>
        </ul>
        <!-- <ul class="bottom clearfix">
          <li class="content" v-for="item in menuBottom" :key="item">{{ item }}</li>
        </ul> -->
        <div class="see-more">
          <div class="line"></div>
          <div @click="goArtShop" class="text">
            查看更多<img src="@/static/img/home/arrow_w.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="right" @click="goDesc">
      <el-image v-if="rightImg" fit="cover" :src="rightImg" alt="" />
    </div>
    <div class="bg-img">
      <img :src="bgImg" alt="" />
    </div>
  </div>
</template>

<script>
import { getImgUrl } from "@/utils/downloadFile";
// import { url } from 'inspector'
export default {
  data() {
    return {
      menuTop: ["360VR展厅", "3D模型展厅", "精品展厅", "艺术展厅"],
      active: 0,
      bgImg: "",
      rightImg: "",
      data_id: "",
    };
  },
  mounted() {
    this.vrstadiums();
    // this.threeModle()
  },
  methods: {
    getImgUrl,
    handleMenu(index) {
      console.log("index", index);
      this.active = index;
      if (index === 0) {
        this.vrstadiums();
      } else if (index === 1) {
        this.threeModle();
      } else if (index === 2) {
        this.getBoutiqueList();
      } else {
        this.artShopList();
      }
    },
    goArtShop() {
      this.$router.push("/artShop");
    },
    goDesc() {
      if (this.$ua.isFromPc()) {
        this.$router.push({
          path: "/artShop/showRoom",
          query: {
            data_id: this.data_id,
            type: this.active === 1 ? "threeModle" : "vrstadiums",
          },
        });
      } else {
        this.$toast.fail("查看展厅详情请到电脑端");
      }
    },
    vrstadiums() {
      this.$api.vrstadiums({}).then((res) => {
        console.log("vrstadiumsList", res);
        const rightImg = Array.isArray(res.result.item_list)
          ? res.result.item_list[0]
          : [];
        this.rightImg = rightImg.title_page;

        console.log("rightImg", this.rightImg);
        this.data_id = rightImg?.data_id;
        const bgImg = this.$store.state.router.router[0].children.find(
          (item) => {
            return item.name === "artShop";
          }
        )?.meta?.vrBanner[0];
        this.bgImg = bgImg?.url;
        console.log("bgimg", this.bgImg);
      });
    },
    threeModle() {
      this.$api.threeModle({}).then((res) => {
        console.log("threeModle", res);
        const rightImg = Array.isArray(res.result.item_list)
          ? res.result.item_list[0]
          : [];
        this.rightImg = rightImg.title_page;
        // this.rightImg = getImgUrl("3dmodle", rightImg?.data_id, "title_page");
        this.data_id = rightImg?.data_id;
        const bgImg = this.$store.state.router.router[0].children.find(
          (item) => {
            return item.name === "artShop";
          }
        )?.meta?.threeBanner[0];
        this.bgImg = bgImg?.url;
      });
    },
    artShopList() {
      this.$api.artShopList({}).then((res) => {
        this.rightImg = Array.isArray(res.result.item_list)
          ? res.result.item_list[0].title_page
          : [];
        const bgImg = this.$store.state.router.router[0].children.find(
          (item) => {
            return item.name === "artShop";
          }
        )?.meta?.artBanner[0];
        this.bgImg = bgImg?.url;
      });
    },
    getBoutiqueList() {
      this.$api.boutique({}).then((res) => {
        if (res.status === "$SUCCESS") {
          this.rightImg = Array.isArray(res.result.item_list)
            ? res.result.item_list[0].title_page
            : [];
          const bgImg = this.$store.state.router.router[0].children.find(
            (item) => {
              return item.name === "artShop";
            }
          )?.meta?.boutiqueBanner[0];
          this.bgImg = bgImg?.url;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.art-gallery {
  &.z-web {
    height: 1080px;
    // background-image: url('@/static/img/login/menu_bg.png');
    padding: 185px 0;
    position: relative;

    .bg-img {
      width: 100%;
      height: 1080px;
      position: absolute;
      top: 0;

      img {
        width: 100%;
        height: 100%;
        filter: blur(4px);
      }
    }

    .left {
      display: inline-block;
      position: relative;
      z-index: 99;
      margin-left: 150px;

      .see-more {
        margin-left: 48px;
      }

      .chinese {
        color: #fff;
        font-weight: 500;
        text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3);
      }

      .menu {
        max-width: 300px;
        vertical-align: top;
        display: inline-block;
        margin-left: 125px;

        .top {
          display: flex;
        }

        .content {
          font-size: 24px;
          font-family: SourceHanSerifSC;
          color: #fff;
          line-height: 72px;
          opacity: 0.5;
          writing-mode: vertical-lr;
          float: left;
          margin-bottom: 60px;
          cursor: pointer;
          opacity: 0.5;
        }

        .new-content {
          opacity: 1;
        }

        // .top {
        //   margin-bottom: 60px;
        // }
      }
    }

    .right {
      // width: 456px;
      // height: 608px;
      float: right;
      background-color: rgba(0, 0, 0, 0);
      cursor: pointer;
      position: relative;
      z-index: 99;
      margin-right: 150px;

      ::v-deep(.el-image) {
        max-height: 808px;
        width: 756px;
      }
    }
  }

  &.z-phone {
    width: 100%;
    height: pxtorem(750);
    position: relative;
    padding: pxtorem(60) pxtorem(40) pxtorem(40) pxtorem(30);

    .title {
      margin-left: 0;
      vertical-align: top;
      // margin-top: pxtorem(60);
    }

    .left {
      position: relative;
      z-index: 99;
    }

    .right {
      position: relative;
      z-index: 99;
    }

    .bg-img {
      width: 100%;
      height: pxtorem(750);
      position: absolute;
      top: 0;
      left: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(5px);
      }
    }

    .menu {
      display: inline-block;
      margin-left: pxtorem(50);

      .top {
        .content {
          display: inline-block;
          writing-mode: vertical-lr;
          font-size: pxtorem(24);
          font-weight: 600;
          color: #ffffff;
          opacity: 0.5;
          margin-right: pxtorem(60);

          &:last-child {
            margin-right: 0;
          }

          &.new-content {
            opacity: 1;
          }
        }
      }
    }

    .see-more {
      width: pxtorem(150);
      margin-top: pxtorem(60);
      margin-left: pxtorem(70);

      .text {
        margin-top: pxtorem(20);
        font-size: pxtorem(18);
        font-family: Source Han Serif SC;
        font-weight: 600;
        color: #fff;
      }

      img {
        width: pxtorem(40);
        margin-top: pxtorem(10);
      }
    }

    .right {
      float: right;

      ::v-deep(.el-image) {
        width: pxtorem(300);
      }
    }
  }
}
</style>
